<% layout('/views/layouts/default.html', {title: 'AppUser List', libs: ['validate']}){ %>
<section class="content-header">
	<h1>appUser&nbsp;
		<a href="/appUser/listPage"><button class="btn btn-xs jfedit btn-default">初始化</button></a>&nbsp;
		<a href="/appUser/addPage"><button class="btn btn-xs jfedit btn-primary">新增</button></a>
	</h1>
	<ol class="breadcrumb">
		<li>
				<input id="id" name="id" type="text" style="width:150px;height:32px;" placeholder="自定义查询,默认ID" value=""/>
				<input id="select_button" class="btn btn-sm btn-info" type="submit" value="查询"/>
		</li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	</ol>
</section>

<!-- Main content -->
<section class="content">
	<div class="row">
		<div class="col-xs-12">
			<div class="box">
				<div class="box-body">
					<table id="example" class="table table-bordered table-hover" style="width:100%">
						<thead>
							<tr>
								<th>id</th>
								<th>用户名</th>
								<th>密码</th>
								<th>年龄</th>
								<th>token</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody></tbody>
						<tfoot>
							<tr>
								<th>id</th>
								<th>用户名</th>
								<th>密码</th>
								<th>年龄</th>
								<th>token</th>
								<th>操作</th>
							</tr>
						</tfoot>
					</table>
				</div>
			</div>
		</div>
	</div>
</section>
<% } %>

<script>
$(function() {
	//重要修改 表格内容的自定义，需要根据业务定制
	var table = $("#example").dataTable({
		<!--lengthMenu: [10,20,50], //如果有修改不生效，请设置bStateSave=false-->
		order: [[0, "desc" ]],    //默认第一列 倒序
		autoWidth: false,  //禁用自动调整列宽
		stripeClasses: ["odd", "even"],  //为奇偶行加上样式，兼容不支持CSS伪类的场合
		processing: true,  //隐藏加载提示,自行处理
		serverSide: true,  //启用服务器端分页
		searching: false,  //禁用原生搜索
		orderMulti: true,  //启用多列排序
		ordering:true,//使用排序
		bStateSave:false,//记录cookie
		renderer: "bootstrap",  //渲染样式：Bootstrap和jquery-ui
		pagingType: "simple_numbers",  //分页样式：simple,simple_numbers,full,full_numbers

		ajax: function (data, callback, settings) {
			//排序字段数组
			var orderKeyArr=['id','username','password','age','token'];

			//封装请求参数
			var param = {};
			param.pageSize= data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
			param.pageNum = (data.start / data.length);//当前页码
			//自定义的参数
			<!--param.type=$("select[name='type']").val();//获取要筛选的类别-->
			param.id=$("input[name='id']").val();//获取要筛选的名字
			//获取排序的参数
			var column = data.order[0].column;
			param.orderField= orderKeyArr[column];
			param.ascStr= data.order[0].dir;

			//ajax请求数据方法
			$.ajax({
				type: "GET",
				url: "/appUser/list",//url请求的地址
				cache: false,  //禁用缓存
				data: param,  //传入组装的参数
				dataType: "json",
				success: function (result) {
					//封装返回数据重要
					var returnData = {};
					//这里直接自行返回了draw计数器,应该由后台返回
					<!--returnData.draw = data.draw;-->
					//返回数据全部记录
					returnData.recordsTotal = result.total;
					//后台不实现过滤功能，每次查询均视作全部结果
					returnData.recordsFiltered = result.total;
					//返回的数据列表
					returnData.data = result.records;

					//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
					//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
					callback(returnData);
				}
			});
		},

		//列表表头字段
		"columns": [
			{ "data": "id" },
			{ "data": "username" },
			{ "data": "password" },
			{ "data": "age" },
			{ "data": "token" },
			{ "data": "token" ,"width":"100px"}
		],
		"aoColumnDefs":[
		{//倒数第一列
			"targets":-1,
			"bSortable": false,
			render: function(data, type, row) {
				var html ='<a href="/appUser/editPage?id='+row.id+'"><button class="btn btn-xs jfedit btn-info" value="'+row.id+'">编辑</button></a>&nbsp;&nbsp;&nbsp;&nbsp;'
				+'<button onclick="delFun('+row.id+')" id="delButton" class="btn btn-xs btn-danger jfdelete">删除</button>';
				return html;
			}
		}]
	}).api();
	//此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象

	//查询按钮
	$("#select_button").click(function(){
		table.ajax.reload();
	});
});


function delFun(id){
	if(confirm("确定删除嘛？")){
		$.ajax({
			url:"/appUser/delete?id=" + id,
			success:function(data){
				window.location.href="/appUser/listPage";
			}
		});
	};
}
</script>
